<template>
  <div class="col-md-5 el-col-md-offset-7 fgt_main" >
    <span class="fgt_span">欢迎使用ZTY智能检测平台</span>
    <span class="fgt_hint">Welcome to ZTY AI Platform</span>
    <div class="fgt_box">
      <span class="text">请在下方输入您的电子邮箱地址进行密码重置</span>
      <span class="input_sp" :class="{'active':flag}">
         <input  class="input_box" type="email" @focus="changeTrue" @blur="changeFalse"/>
      <span>
      <i class="el-icon-message email_icon" ></i>
      </span>
      </span>

      <el-button class="fgt_sp" type="primary" @click="submit">提交</el-button>
      <div class="last">
        <span>已有账号？</span>
        <span style="color: #1362FC" @click="goLogin">登录</span>
      </div>
    </div>

  </div>
</template>

<script>
export default {
  name: "ForgetPwd",
  data() {
    return{
      flag:false,
    };
  },
  methods:{
    goLogin() {
      this.$router.push("/user/login")
    },
    submit(){
      alert("重置成功！去登录~");
      this.$router.push("/user/login");
    },
    changeTrue() {
      this.flag=true;
    },
    changeFalse() {
      this.flag=false;
    }
  }
}
</script>

<style scoped>
* {
  padding: 0;
  margin: 0;
}
.text {
  display: block;
  text-align: left;
  /*background-color: lemonchiffon;*/
  margin-top: 10px;
  margin-bottom: 10px;
  color: #606266;
  font-weight: 600;
  font-size: 14px;
}
.active {
  border-color: #1362FC !important;
}
.fgt_main {
  position: absolute;
  line-height: 20px;
  background-color: white;
  /*background-color:lavenderblush;*/
  border-radius: 5px;
  margin-top: 3%;
  height: 400px;
  margin-left: 30%;
  box-shadow: 0 0 2.1875rem 0 rgba(154,161,171,0.15);
  text-align: center;
  transistion: .3s;
}
.fgt_box {
  /*background-color: lavenderblush;*/
  width: 82%;
  height: 70%;
  margin: 0 auto;
  margin-top: 6%;
}
.fgt_span {
  display: block;
  /*background-color: lavenderblush;*/
  height: 24px;
  line-height: 24px;
  margin-top: 10%;
  font-weight: 600;
  letter-spacing: 1px;
  color: black;
}
.fgt_hint {
  display: block;
  margin-top: 3px;
  /*background-color: lavender;*/
  font-size: 12px;
  line-height: 16px;
  height: 16px;
  font-weight: 300;
}
.email_icon{
  color: #1362FC;
  width: 20%;
  height: 100%;
  font-size: 23px;
  font-weight: 400;
  line-height: 3.2rem;
}
span {
  cursor: default;
}

.fgt_sp {
  display: block;
  letter-spacing: 2px;
  width: 100%;
  height: 50px;
  line-height: 50px;
  color: white;
  background-color: #1362FC;
  font-weight: 600;
  font-size: 16px;
  margin-top: 25px;
  border-radius: 16px;
}
input {
  background:none;
  outline:none;
  border:none;
}
.input_sp
{
  width: 100%;
  display: block;
  height: 3.2rem;
  border-radius: 14px;
  border: 1px solid #F2F2F2;
  padding-left: 10px;
  transition: border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out;
}
.input_box {
  float: left;
  width: 80%;
  display: block;
  /*height: 40px;*/
  height: 3.2rem;
  padding: 10px;
  color: #969BA0;
  font-weight: 400;
}


.last {
  /*background-color: lavender;*/
  ma-left: 30%;
  padding-top: 10px;
  height: 40px;
  line-height: 40px;
  text-align: left;
  font-size: 13px;
  color: #969BA0;
}
</style>